<template>
    <div class="headerContent" v-if="true">
        <div class="headerContentLeft"> 
            <div class="headerContentLeftTitles">
                <div class="titles1">
                    <!-- <div class="rongyiImg">
                        <div></div>
                    </div> -->
                    <div class="first">
                        <div class="" v-for="(item,index) of rongyu" :key="index">
                            {{item}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="kaihuaThirty">
            <div @click="toThirty"></div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            rongyu:["革命老区县","国家生态县","中国白颈长尾雉之乡","中国清水鱼之乡","中国天然氧吧","国家园林县城","国家卫生县城","浙江省食品安全县"],
            rongyu1:["革命老区县","国家生态县","中国白颈长尾雉之乡","中国清水鱼之乡","中国天然氧吧","国家园林县城","国家卫生县城","浙江省食品安全县"],
            rongyu2:["中国绿茶金山角核心产区","中国休闲小城","全国农村电气化建设先进县","全国林业示范先进县","全国绿化造林百佳县","全国生态文明建设试点县","中国根雕艺术之乡","全国无公害茶叶生产基地县"
            ],
            rongyu3:["全国举重高水平后备人才基地"],
            index:0,
        }
    },
    methods:{
        toThirty(){
            this.$router.push('/thirty')
        },
        showMarquee(){
            this.animate = true;
            setInterval(() => {
                this.index++;
                if(this.index>2){
                    this.index = 1
                }
                this.rongyu = this["rongyu"+this.index];
            }, 2000);
        }
    },
    mounted(){
        this.showMarquee()
    }
   
       
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/css/varibles.styl'
    .headerContent
        width:100vw
        position:absolute
        top:vh(60)
        left:0
        z-index:102
        display:flex
        color:#f00
        background: #011740;
        margin-bottom:vh(10)
        .headerContentLeft
            height:vh(46)
            background: #011740
            flex:9
            overflow: hidden
            .headerContentLeftInfo
                width:vw(530)
                height:vh(46)
                line-height :vh(46)
                display:flex
                justify-content :space-around
                color: #30AAB5
                font-size:vw(18)
                padding-right:vw(20)
            .headerContentLeftTitles
                height:vh(46)
                line-height:vh(46)
                font-size:vw(15)
                .titles1
                    height:vh(46)
                    overflow: hidden
                    .rongyiImg
                        display:flex
                        flex-direction:column
                        justify-content:center
                        width:vw(50)
                        div 
                            width:vw(18)
                            height:vh(18)
                            background:url("/images/荣誉.png") no-repeat
                            background-size:cover
                            cursor:pointer  
                    div
                        display:flex
                        color:#45F4F7
                        justify-content :space-around
                        height:vh(46)
                        overflow: hidden
                        div
                            flex-shrink:0
                            width:vw(200)
                    div:last-child
                        justify-content :flex-start
                .titles2
                    display:flex
        .kaihuaThirty
            flex:1
            display:flex
            flex-direction:column
            justify-content:space-around
            div
                width:vw(180)
                height:vh(78)
                position:absolute
                bottom:vh(10)
                background:url("/images/kaihua30.png") no-repeat
                background-size:cover 
                cursor:pointer  
</style>